코린이 공부장

뮤직플레이어 리스트만들기 추가 코드블럭 //뮤직 리스트를 클릭하면 재생 function playListMusic(){ const musicListAll = musicListUl.querySelectorAll("li"); //뮤직 리스트 목록 for(let i=0; i{ loadMusic(musicIndex); playListMusic(); }); 보충설명 //뮤직 리스트를 클릭하면 재생 음악 리스트를 관리하는 함수인 playListMusic()입니다. 먼저 querySelectorAll() 함수를 사용하여 musicListUl 요소 내부의 li 태그 목록을 가져옵니다. 그리고 for 루프를 사용하여 모든 음악 리스트 아이템에 대해 아래의 작업을 수행합니다. 1. querySelector() 함수를 사용하..

뮤직플레이어기능 만들기 코드블럭 const allMusic = [ { name : "1.Dangerously", artist : "Charlie Puth", img : "music_view01.png", audio : "music_audio01" }, { name : "2.낭만교향곡", artist : "빅나티", img : "music_view02.png", audio : "music_audio02" }, { name : "3.첫사랑", artist : "백아", img : "music_view03.png", audio : "music_audio03" }, { name : "4.INDUSTRY BABY", artist : "Lil Nas X Jack Harlow", img : "music_view04...

게임이팩트 만들기 다음 프레임과 같이 아이콘을 움직일 수 있으며 아이콘 색깔별 커서와 헤더색 변환, 시간입력, os크기 구현을 해보겠습니다. 코드블럭 EUNJI'S GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직듣기 뮤직듣기 뮤직듣기 뮤직듣기 현재 맥을 사용하고 있으면, 화면 크기는 1920 X 760 입니다. jQuery, jQueryUI, GSAP ✨이 코드는 jQuery, jQueryUI, GSAP의 JavaScript 라이브러리를 가져와 웹 페이지에 포함시키는 코드입니다. 이러한 라이브러리는 웹 개발에서 자주 사용되는 기능을 쉽게 구현할 수 있도록 도와줍니다. ✨jQuery는 DOM(Document Object Model)을 효율적으로 조작하고 AJAX 기능을 제공하는 자바스..

퀴즈사이트 만들기 cbt유형 이번에는 시작화면에서 여러회차의 시험지를 풀어볼 수 있도록 (깃허브링크 연결)하며 이름을 입력해 수험자 이름이 표시되게 해줍니다. 또 타이머를 설정하여 남은시간을 표시해 줍니다. 코드블럭 선택자와 변수선언 const cbt = document.querySelectorAll(".cbt"); const cbtQuiz = document.querySelector(".cbt__quiz"); const cbtOmr = document.querySelector(".cbt__omr"); const cbtSubmit = document.querySelector(".cbt__submit"); const cbtRest = document.querySelector(".cbt__rest"); co..

퀴즈 사이트 만들기 이번에는 문제 체크시 사이드의 오엠알 답안지도 함께 체크되며 문제 한개가 체크 될 때마다 전체 문항수의 남은 문항수가 하나씩 줄어들게 만들어 보겠습니다. 코드블럭 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 정보처리기능사 2009년 5회 2020년 1회 정보처리기능사 기출문제 제출하기 59분 10초 수험자 : 이은지 전체 문제수 : 0문항 남은 문제수 : 0문항 보충설명 👉 answerSelect2라는 이름의 함수가 정의되었습니다. 이 함수는 elem이라는 하나의 매개변수를 받습니다. 👉 answer라는 변수에 elem.value 값이 할당됩니다. 👉 select라는 변수에 ".cbt__omr .omr" CSS 선택자를 이용하여 문서 내에서 해당하는 모든 엘리먼트들의 목록이..

퀴즈 사이트 만들기 이번에는 CBT(컴퓨터 따위로 작성된 훈련 프로그램에 따라 교육하는 작업)유형과 사이드에 OMR카드 효과를 준 퀴즈 사이트를 만들어 보겠습니다. 코드블럭 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 수험자 : 이은지 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 보충설명 🎈 HTML 문서 내에 있는 .cbt, .cbt__quiz, .cbt__omr, .cbt__submit, .cbt__title em 클래스에 대한 참조를 생성한 다음, questionAll 배열을 선언합니다. dataQuestion 함수는 fetch() 메소드를 사용하여 JSON 파일에서 데이터를 가져오고, 각 항목을 새로운 객체로 변환합..

SITE 만들기 헤더유형, 슬라이드유형, 이미지유형, 이미지/텍스트 유형, 카드유형, 배너유형, 텍스트유형, 푸터유형 지금까지 배운 여러 타입들의 페이지를 합쳐 하나의 사이트를 만들어줍니다. 코드블럭 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 슬라이드 영역 EVENT 오사카 여행 휴식과 낭만 그리고 즐거움을 찾으러 오사카로 떠나는 이들을 위한 여행가이드 페이지 관광지, 맛집, 카페등 오사카여행지와 관련된 정보를 공유합니다. 자세히보기 상담신청 이전 이미지 다음 ..

퀴즈사이트 만들기 다음 프레임 처럼 다중 문제를 다음문제버튼을 통해 다음문제로 넘어가는 형태로 만들어 보겠습니다. 코드블럭 Quiz 객관식 확인하기(여러문제) 유형: 슬라이드 1 2 3 4 5 6 . 정답입니다! 틀렸습니다! 다음 문제 ??점 ?개 lee3ll@naver.com 보충설명 ✨ ☞ div 박스에 quiz__answer 라는 class 이름을 붙여 다음문제 버튼을 만들어줍니다. ☞ 점수를 표시하는 박스와 점수를 확인하기 위한 체크버튼을 div 박스로 만들어줍니다. ✨ ☞ const quizInfo = [ {} ] : quizInfo 배열안에 문제정보를 나열합니다. ☞ 전역변수 선택자를 만들어 줍니다. ☞ let quizCount=0와 let quizScore=0 으로 변수를 0으로 지정해줍니다..

Quiz 사이트 만들기 다음 프레임처럼 객관식 유형의 여러문제를 올리면서 정답확인버튼을 만들어 점수가 나오도록 코딩을 짜보겠습니다. 코드블럭 Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 lee3ll@naver.com 보충설명 ☞ const exam = []; 상수 exam을 선언하고 빈배열 ([])을 할당합니다. 이제 exam 상수는 배열 형태의 데이터를 담을 수 있는 변수가 되었습니다. 이 배열에 요소를 추가하거나 제거하여 데이터를 관리할 수 있습니다. ☞ .push 메서드를 사용하여 배열의 끝에 하나 이상의 요소를 추가해줍니다. 위의 코딩에서는 exam 배열에 강아지 애니메이션과 문제의 객관식 보기, 정답확인 버튼을 넣어주었습니다. ☞ exam.join("")는 배열 exam의 모든 요..

FooterType page 만들기 많은 사이트에서 footer영역을 확인해 보면 다음 프레임과 같은 모습을 종종 볼 수있습니다. 이런 페이지를 만드는 방법을 알아보겠습니다. 코드블럭 푸터 오사카 관광지 소개 오사카 여행 오사카 관광지 소개 관광지 코스 추천 관광지 교통편 오사카 먹거리 소개 오사카 먹거리 소개 오사카 먹거리 체험 한국인에게 인기있는 먹거리 오사카 길거리 음식 오사카 맛집 추천 오사카 음식 종류별 맛집추천 유명 관광지별 맛집 위치안내 디저트가 맛있는 카페 소개 분위기 좋은 카페 소개 전통찻집 소개 포장마차 거리 소개 오사카 쇼핑 오사카 쇼핑리스트 100 오사카 인기 스토어 오사카 패션스토어 오사카 기념품샵 오사카 사진 오사카 길거리 사진 오사카 관광지 사진 오사카 계절별 꽃 사진 오사카 ..